<template>
  <div class="">
    <div class="home" >
      <home-header ref="homeheader" @homeheader='contactFn' ></home-header>
      <home-banner v-if="contact==0"></home-banner>
      <home-content v-if="contact==0"></home-content>
      <home-service v-if="contact==0"></home-service>
      <introduce-area v-if="contact==1" ref="introduceArea"></introduce-area>
      <introduce-icon v-if="contact==1"></introduce-icon>
      <ability-content v-if="contact==2"></ability-content>
      <ability-crystal v-if="contact==2"></ability-crystal>
      <ability-provide v-if="contact==2"></ability-provide>
      <ability-saas v-if="contact==2"></ability-saas>
      <channel-content v-if="contact==3" @understandFn = aboutmeFn></channel-content>
      <about-content v-if="contact==4"></about-content>
      <home-footer @phoneFn = "phoneFn" @aboutmeFn="aboutmeFn" @processFn = "processFn" @applyFn = "applyFn" @homefooter='serviceFn'  @homesys="sysFn" @programmeFn = "programmeFn" @customerFn = "CustomerFn"></home-footer> 
    </div>
  </div>
</template>

<script>
  import HomeHeader from './home/Header.vue'
  import HomeBanner from './home/Banner.vue'
  import HomeContent from './home/Content.vue'
  import HomeFooter from './home/Footer.vue'
  import HomeService from './home/Service.vue'
  import IntroduceArea from './introduce/Area.vue'
  import IntroduceIcon from './introduce/Icon.vue'
  import AbilityContent from './ability/Content.vue'
  import AbilityCrystal from './ability/Crystal.vue'
  import AbilityProvide from './ability/Provide.vue'
  import AbilitySaas from './ability/Saas.vue'
  import ChannelContent from './channel/Content.vue'
  import AboutContent from './about/Content.vue'

export default {
  name:"Home",
  components:{
    HomeHeader,
    HomeBanner,
    HomeContent,
    HomeFooter,
    HomeService,
    IntroduceArea,
    IntroduceIcon,
    AbilityContent,
    AbilityCrystal,
    AbilityProvide,
    AbilitySaas,
    ChannelContent,
    AboutContent,

  },
  data(){
    return {
      act:true,

      swiperList:[],
      contact:[],
      serviceCon:[],
      customer:false
    }
  },
  methods:{
    // 显示隐藏
    clickFn(){
      this.act=!this.act
    },
    customerFn(){
      this.customer=!this.customer
    },
    contactFn(data){
      this.contact =  data
    },
    serviceFn(data){
      this.contact = data
      // this.activeFn
      this.$refs.homeheader.homeheader(this.contact)
      console.log(this.activeFn,123)
      // this.serviceCon = data
      console.log("service")
      console.log(this.serviceCon)
    },
    //五大系统
    sysFn(data){
      this.contact = data
      // this.activeFn
      this.$refs.homeheader.homeheader(this.contact)
    },
    // 解决方案
    programmeFn(data){
      this.contact = data
      this.$refs.homeheader.homeheader(this.contact)

    },
    // 适合用户
    CustomerFn(data){
      this.contact = data
      this.$refs.homeheader.homeheader(this.contact)

    },
    //合作条件
    applyFn(data){
      this.contact = data
      this.$refs.homeheader.homeheader(this.contact)

    },
    //申请流程
    processFn(data){
      this.contact = data
      this.$refs.homeheader.homeheader(this.contact)

    },
    //关于我们
    aboutmeFn(data){
      this.contact = data
      this.$refs.homeheader.homeheader(this.contact)

    },
    //联系我们
    phoneFn(data){
      this.contact = data
      this.$refs.homeheader.homeheader(this.contact)

    },
    
  },

}
</script>
  
<style scoped lang="stylus">
@media (min-width: 372px){
.container {
    width: 100%;
}
}


</style>